﻿@{
    ViewBag.Title = "PedidoDetalle";
    Layout = "~/Views/Shared/_Template.cshtml";
}
@section ClientScripts {
    <script type='text/javascript'>

        $(function () {

            $("#txtFecha").datepicker();
            $("#txtFechaEntrega").datepicker();

            //Typeahead for Autocomplete
            $('#selectClientes').typeahead({
                name: 'clientes',
                prefetch: 'assets/demo/clientes.json',
                limit: 10
            });
        });


        var editor;

        $(function () {
            editor = new $.fn.dataTable.Editor({
                "ajaxUrl": "LoadDetallePedidos",
                "domTable": "#tblDetalle",
                "fields": [
                    {
                        "label": "Codigo:",
                        "name": "codigo"
                    },
                    {
                        "label": "Producto:",
                        "name": "producto"
                    },
                    {
                        "label": "Descripcion:",
                        "name": "descripcion"
                    },
                    {
                        "label": "Cantidad:",
                        "name": "cantidad"
                    },
                    {
                        "label": "Kg:",
                        "name": "kg"
                    },
                    {
                        "label": "C / KG:",
                        "name": "ckg"
                    },
                    {
                        "label": "Parcial:",
                        "name": "parcial"
                    },
                    {
                        "label": "Total:",
                        "name": "total"
                    }
                ]
            });

            $('#tblDetalle').dataTable({
                "sDom": "<'row'<'col-sm-12'T><'col-sm-12'f>r>t<'row'<'col-sm-12'i><'col-sm-12'p>>",
                "sAjaxSource": "LoadDetallePedidos",
                "bServerSide": false,
                "bAutoWidth": false,
                "bPaginate": false,
                "bDestroy": true,
                "bFilter": false,
                "bInfo": false,
                "aoColumns": [
                    { "mData": "Codigo" },
                    { "mData": "Producto" },
                    { "mData": "Descripcion" },
                    { "mData": "Cantidad", "sClass": "center" },
                    { "mData": "Kg", "sClass": "center" },
                    { "mData": "cKg", "sClass": "center" },
                    { "mData": "Parcial", "sClass": "center" },
                    { "mData": "Total", "sClass": "center" }
                ],
                "oTableTools": {
                    "sRowSelect": "single",
                    "aButtons": [
                        { "sExtends": "editor_create", "editor": editor },
                        { "sExtends": "editor_edit", "editor": editor },
                        { "sExtends": "editor_remove", "editor": editor }
                    ]
                }
            });
            //$('.dataTables_filter input').addClass('form-control').attr('style','display:none');
            $('.dataTables_length select').addClass('form-control');

        });

    </script>
}
<div id="page-content">
    <div id='wrap'>
        <div id="page-heading">
            <ol class="breadcrumb">
                <li class='active'><a href="index.php">Ventas</a></li>
                <li class='active'><a href="index.php">Pedidos</a></li>
            </ol>

            <h1>Ventas</h1>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4>Nueva</h4>

                        </div>
                        <div class="panel-body" style="border-radius: 0px 0px 0px 0px;">
                            <h3>Pedido</h3>
                            <p></p>
                            <br>
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-xs-2 control-label" for="mediuminput">Fecha</label>
                                    <div class="col-xs-3">
                                        <input type="text" class="form-control" id="txtFecha">
                                    </div>
                                    <label class="col-xs-2 control-label" for="mediuminput">Fecha Entrega</label>
                                    <div class="col-xs-3">
                                        <input id="txtFechaEntrega" type="text" class="form-control typeahead" placeholder="" width="300">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label" for="mediuminput">Cliente</label>
                                    <div class="col-xs-3">
                                        <input id="selectClientes" type="text" class="form-control typeahead" placeholder="Cliente" width="300">
                                    </div>
                                    <label class="col-xs-2 control-label" for="mediuminput">Contacto</label>
                                    <div class="col-xs-3">
                                        <input type="text" class="form-control" id="letra">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="panel panel-sky">
                                            <table cellpadding="0" cellspacing="0" border="0" class=" table-responsive table-striped table-bordered datatables" id="tblDetalle">
                                                <thead>
                                                    <tr>
                                                        <th width="5%">Cod.</th>
                                                        <th width="20%">Producto</th>
                                                        <th width="20%">Descripcion</th>
                                                        <th width="8%">Cantidad</th>
                                                        <th width="8%">Kg</th>
                                                        <th width="8%">$ c/Kg</th>
                                                        <th width="8%">Parcial</th>
                                                        <th width="8%">Total</th>
                                                    </tr>
                                                </thead>

                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="panel-footer">
                            <div class="row">
                                <div class="col-sm-6 col-sm-offset-3">
                                    <div class="btn-toolbar">
                                        <button class="btn-primary btn">Submit</button>
                                        <button class="btn-default btn">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- container -->
    </div> <!--wrap -->
</div> <!-- page-content -->

